<template>
  <div class="center-container">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <h3>个人中心</h3>
        <el-button style="float: right; padding: 3px 0" type="text" @click="btnClick">戳这里，戳这里</el-button>
      </div>
      <div >
        <el-card class="box-card">
          <el-form :ref="user" :model="user" label-width="80px">
            <el-form-item label="用户头像">
              <el-avatar :size="70" src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"></el-avatar>
            </el-form-item>
            <el-form-item label="昵称">
              <el-input v-model="user.nickName" :disabled="true"></el-input>
            </el-form-item>
            <el-form-item label="手机号">
              <el-input v-model="user.phone" :disabled="true"></el-input>
            </el-form-item>
            <el-form-item label="收货地址">
              <el-table
                  :data="addresses"
                  height="250px"
                  style="width: 100%"
              >
                <el-table-column prop="consignee" label="收货人" width="180"></el-table-column>
                <el-table-column prop="mobile" label="电话" width="180"></el-table-column>
                <el-table-column prop="address" label="地址" width="180"></el-table-column>
                <el-table-column  label="操作" width="180">
                  <template slot-scope="scope">
                    <el-button type="primary" size="small" @click="updateAddressBefore(scope.row)">编辑</el-button>
                    <el-button type="danger" size="small" @click="deleteAddress(scope.row.id)">删除</el-button>
                  </template>
                </el-table-column>
              </el-table>
              <el-button type="primary" @click="addBefore">添加收货地址</el-button>
            </el-form-item>
            <el-form-item label="用户密码">
              <el-button type="danger" @click="updatePasswordBefore">修改密码</el-button>
            </el-form-item>

          </el-form>
        </el-card>
      </div>
    </el-card>

    <!--修改收货人地址信息-->
    <el-dialog
      :title="title"
      :visible.sync="dialogVisible"
      width="30%">
      <el-form :model="address">
        <el-form-item label="收货人">
          <el-input v-model="address.consignee" placeholder="请填写收货人"></el-input>
        </el-form-item>
        <el-form-item label="电话">
          <el-input v-model="address.mobile" placeholder="请填写收货人电话"></el-input>
        </el-form-item>
        <el-form-item label="地址">
          <el-input v-model="address.address" placeholder="请填写收货人地址"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="updateAddress">确 定</el-button>
      </span>
    </el-dialog>

    <!--修改密码-->
    <el-dialog
        title="修改密码"
        :visible.sync="dialogVisiblePassWord"
        width="30%">
      <el-form :model="user">
        <el-form-item label="旧密码">
          <el-input v-model="pwd" placeholder="请填写旧密码"></el-input>
        </el-form-item>
        <el-form-item label="新密码">
          <el-input v-model="user.password" placeholder="请填写新密码"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisiblePassWord = false">取 消</el-button>
        <el-button type="primary" @click="updatePassword">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import {getToken, getUser} from "../../utils/baseinfo";
import {findAddress, updateAddress, deleteAddress, addAddress} from "../../api/user/address";
import {findUser, updateUser} from "../../api/user/user";

export default {
  name: "Center",
  data() {
    return {
      addresses: [],
      user:{
        nickName: '',
        phone: ''
      },
      address: {
        mobile: '',
        consignee: '',
        address: ''
      },
      dialogVisible: false,
      dialogVisiblePassWord: false,
      title: '修改地址信息',
      pwd: ''
    }
  },

  created() {
    if(this.checkLogin()) {
      this.getUser();
      this.getAddress();
    };


  },

  methods: {
    checkLogin() {
      const token = getToken();
      if(token == undefined || token == '') {
        this.$message.error("未登录，请登录")
        this.$router.push({path: '/'})
        return false;
      }
      return true;
    },
    getUser() {
      const userId = getUser() != null ? getUser().id : '';
      findUser(userId).then(response => {
          this.user = response.data.user
      }).catch(error => {
        console.log(error);
      })
    },

    getAddress() {
      const userId = getUser() != null ? getUser().id : '';

      findAddress(userId, 1, 100).then(response => {
        this.addresses = response.data.addresses
      }).catch(error => {
        console.log(error)
      })
    },

    updateAddressBefore(address) {
      this.dialogVisible = true
      console.log("address")
      console.log(address)
      this.address = address
    },

    updateAddress() {
      if(this.title == '修改地址信息') {
        updateAddress(this.address).then(response => {
          this.dialogVisible = false;
          this.$message.success("地址修改成功")
          this.getAddress()
        }).catch(error => {
          console.log(error)
        })
      } else {
        const userId = getUser() != null ? getUser().id : '';
        this.address.userId = userId;
        addAddress(this.address).then(response => {
          this.dialogVisible = false;
          this.title = '修改地址信息'
          this.$message.success("收货人地址添加成功")
          this.getAddress()
        }).catch(error => {
          console.log(error)
        })
      }
    },

    deleteAddress(id) {
      deleteAddress(id).then(response => {
        this.$message.success("地址删除成功")
        this.getAddress()
      }).catch(error => {
        console.log(error)
      })
    },

    addBefore() {
      this.address = {}
      this.title = '添加收货人地址信息'
      this.dialogVisible = true
    },

    btnClick() {
      const h = this.$createElement;
      this.$notify({
        title: '祝贺',
        message: '恭喜您，成为尊贵的用户',
        type: 'success'
      });
    },

    updatePasswordBefore() {
      this.dialogVisiblePassWord = true;
    },

    updatePassword() {
      let user = {id: this.user.id, password: this.user.password }
      updateUser(user).then(response => {
        this.dialogVisiblePassWord = false;
        this.$message.success('密码修改成功');
      }).catch(error => {
        console.log(error)
      })
    }
  }
}
</script>

<style scoped>
.box-card {
  width: 80%;
  margin: auto;
}
</style>
